import React from 'react';
import { inject, observer} from 'mobx-react';
import {Spin,Table,Button,Modal,Radio } from 'antd';
import { WeaNewScroll,WeaTab,WeaTools,WeaRichText,WeaReqTop,WeaTop,WeaSearchGroup,WeaFormItem,WeaBrowser,WeaDateGroup,WeaInput,WeaSelect,WeaRightMenu,WeaDialog} from 'ecCom';
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
const renderContent = (value, row, index,idx) => {
  const obj = {
    children: value,
    props: {},
  };
  if (index >= idx) {
    obj.props.colSpan = 0;
    obj.props.rowSpan = 0;
  }
  return obj;
};
@observer
export default class PlanResultList extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        showSearchAd :false,
        isrefesh:false,
        tabs:[{
          key: "4",
          title: "年度"
        },
        {
          key: "3",
          title: "半年"
        },{
          key: "2",
          title: "季度"
        },
        {
          key: "1",
          title: "月度"
        }],
        datalist:[{"key":1,"cate":"分类1","accessitemid":"测试指标1","description":"描述1","rate":"50","target":"100","pscore":5,"score":5},
                  {"key":2,"cate":"分类2","accessitemid":"测试指标2","description":"描述2","rate":"50","target":"100","pscore":5,"score":5},
                  {"key":3,"result":"考核得分","pscore":5},{"key":4,"result":"修正分"},{"key":5,"result":"考核评价"}
                  ,{"key":6,"result":"相关附件"},{"key":7,"result":"月总得分","pscore":5},{"key":8,"result":"最终得分","pscore":5}
                 ],
        selectedKey:"1",
        columns:[
          {title: '分类',dataIndex: 'cate',width:'10%',
          render:(text, record, index) =>{
            if (index < 2) {
              return <div>{text}</div>;
            }
            if(index==2){
              return {
                children: <div>相关说明<br/>{text}</div>,
                props: {
                  colSpan: 5,
                  rowSpan:6,
                },
              };
            }else{
              return renderContent(text, record, index,2)
            }
          }
          },
          {title: '指标类型',dataIndex: 'accessitemid', width:'20%',
          render:(text, record, index) =>renderContent(text, record, index,2)
          },
          {title: '指标描述',dataIndex: 'description',width:'20%',
          render:(text, record, index) =>renderContent(text, record, index,2)
          },
          {title: '权重(%)',dataIndex: 'rate',width:'5%',
          render:(text, record, index) =>renderContent(text, record, index,2)
          },
          {title: '目标值',dataIndex: 'target',width:'10%',
          render:(text, record, index) =>renderContent(text, record, index,2)
          },
          {title: '完成值',dataIndex: 'result',width:'10%',
          render:(text, record, index) =>{
            if (index < 2) {
              return <div>{text}</div>;
            }
            return {
              children: <div>{text}</div>,
              props: {
                colSpan: 2,
              },
            };
          }
          },
          {title: '下月目标',dataIndex: 'nexttarget',width:'10%',
          render:(text, record, index) =>renderContent(text, record, index,2)
          },
          {title: '杨文元(100%)',children: [{
            title: '评分',
            dataIndex: 'pscore',
            key: 'pscore',
            width: '5%',
            render:(text, record, index) =>{
              if (index < 2) {
                return <div>{text}</div>;
              }
              return {
                children: <div>{text}</div>,
                props: {
                  colSpan: 3,
                },
              };
            }
          },{
            title: '得分',
            dataIndex: 'score',
            key: 'score',
            width: '5%',
            render:(text, record, index) =>renderContent(text, record, index,2)
          },{
            title: '说明',
            dataIndex: 'remark',
            key: 'remark',
            width: '5%',
            render:(text, record, index) =>renderContent(text, record, index,2)
          }]
          }
        ],
        menu :[
        {
          key: '0',
          icon: <i className='icon-coms-search' />,
          content: '保存',
          onClick: key => {},
        },{
          key: '1',
          icon: <i className='icon-coms-search' />,
          content: '提交',
          onClick: key => {},
        }
        ],
        yearDatas:[],
        _height:this.getHeight(),
        heightInit:false,
      }
    }
    componentWillMount() {//一些初始化请求
      let ydatas = [];
      for(let i=2013;i<2020;i++){
       ydatas.push({key: i,showname: i,selected: false});
      }
      this.setState({yearDatas:ydatas});
    }
    
    showTotal(total){
      return `共 ${total} 条`;
    }
    showCurrentChange = (current) => {
      
    }
    onShowSizeChange =(current, pageSize)=>{
     
    }
    onSelectChange = (selectedRowKeys,selectedRows) => {
     
    }
    getHeight(header){
      let h = 0;
      if(header){
          h = header.clientHeight || 0;
      }
      return window.innerHeight-h;
    }
    render() {
      const{showSearchAd,columns,menu,yearDatas,_height,tabs,datalist,selectedRowKeys,topTab,selectedKey} = this.state;
      let header = document.getElementsByClassName("e9theme-layout-header")[0];
      if(header && !heightInit){
          this.setState({_height:this.getHeight(header),heightInit:true});
      }
      return (
        <div className="wea-workrelate-perfor-gpreport" style={{height:_height}}>
        <WeaRightMenu datas={menu} showUrlItem={false} style={{height:'100%'}}>
            <WeaReqTop
              title="杨文元2019年4月目标绩效考核"
              icon={<i className='icon-coms-ModelingEngine-o' />}
              iconBgcolor='rgb(150, 53, 138)'
              tabDatas={tabs}
              selectedKey={selectedKey}
              buttons = {[(<Button type='primary' onClick={()=>{}}>保存</Button>),
              (<Button type='primary' onClick={()=>{}}>提交</Button>)]}
              showDropIcon={true}
              dropMenuDatas = {menu}
            >
              <div style={{ height: _height-80, background: "#fff" }}>
              <div style={{padding:"5px 10px"}}>
              <WeaSelect options={yearDatas} value={"2019"} viewAttr={2} style={{width:80,marginRight:10}}/>
              <RadioGroup  onChange={(e)=>this.onMonthChange(e)} defaultValue={"4"} style={{verticalAlign:"bottom"}}>
                        <RadioButton value="1" style={{border:"1px solid #e2e2e2"}}>1月</RadioButton>
                        <RadioButton value="2" style={{border:"1px solid #e2e2e2"}}>2月</RadioButton>
                        <RadioButton value="3" style={{border:"1px solid #e2e2e2"}}>3月</RadioButton>
                        <RadioButton value="4" style={{border:"1px solid #e2e2e2"}}>4月</RadioButton>
                        <RadioButton value="5" style={{border:"1px solid #e2e2e2"}}>5月</RadioButton>
                        <RadioButton value="6" style={{border:"1px solid #e2e2e2"}}>6月</RadioButton>
                        <RadioButton value="7" style={{border:"1px solid #e2e2e2"}}>7月</RadioButton>
                        <RadioButton value="8" style={{border:"1px solid #e2e2e2"}}>8月</RadioButton>
                        <RadioButton value="9" style={{border:"1px solid #e2e2e2"}}>9月</RadioButton>
                        <RadioButton value="10" style={{border:"1px solid #e2e2e2"}}>10月</RadioButton>
                        <RadioButton value="11" style={{border:"1px solid #e2e2e2"}}>11月</RadioButton>
                        <RadioButton value="12" style={{border:"1px solid #e2e2e2"}}>12月</RadioButton>
                    </RadioGroup>
              </div>
              <Table columns={columns} bordered={true} scroll={{y: _height - 200}} dataSource={datalist} className ="wea-develop-antd-table"
               pagination={false}/>
             </div> 
             <WeaSearchGroup title='意见反馈' showGroup={true} >
                        <WeaRichText
                          ckConfig={{
                            toolbar: [
                              { name: 'document', items: ['Source'] },
                              { name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', '-', 'NumberedList', 'BulletedList'] },
                              { name: 'styles', items: ['Format', 'Font', 'FontSize'] },
                              { name: 'colors', items: ['TextColor'] },
                              { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike',] },
                              { name: 'insert', items: ['Image', 'Table', 'Smiley'] }
                            ],
                            height: 200,
                            autoGrow_minHeight: 200,
                            autoGrow_maxHeight: 200,
                            uploadUrl: '/api/develop/docs/uploadimage',
                            resize_enabled: false,
                            startupFocus:false,
                          }}
                          extentsConfig
                          onToolsChange={(name, ids, list, type) => this.transfStr(name, ids, list, type)}
                        />
                    </WeaSearchGroup>
                    <WeaSearchGroup title='操作日志' showGroup={true} >
                    </WeaSearchGroup>
             </WeaReqTop>
          </WeaRightMenu>
        </div>
    )
  }
};